<template>
  <div class="post_publish">
    <!-- 1.面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a>文章管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>文章编辑</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 2.卡片视图 -->
    <el-card class="box-card" style="margin-top: 15px">
      <!-- 表单 -->
      <el-form
        :model="postForm"
        :rules="rules"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="title" label="标题">
          <el-input
            v-model.trim="postForm.title"
            placeholder="请输入文章标题"
          ></el-input>
        </el-form-item>
        <!-- 类型 -->
        <el-form-item label="文章类型">
          <el-radio-group v-model="postForm.type">
            <el-radio :label="1">文章</el-radio>
            <el-radio :label="2">视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--所属栏目ID集合  -->
        <el-form-item label="栏目" prop="categories">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0"></div>
          <el-checkbox-group v-model="postForm.categories">
            <el-checkbox
              v-for="item in cateList"
              :key="item.id"
              :label="item.id"
              name="categories"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- 文章和视频收集 -->
        <el-form-item label="文章内容" prop="content">
          <!-- 文章---富文本组件 -->
          <VueEditor
            :config="config"
            ref="vueEditor"
            v-show="postForm.type === 1"
          ></VueEditor>
          <!-- 视频  -->
          <el-upload
            class="upload-demo"
            :action="$baseUrl + '/upload'"
            :headers="headers"
            v-show="postForm.type === 2"
            :on-success="onVideoSuccess"
            :before-upload="videoBeforeUpload"
            :on-remove="videoRemove"
            :file-list="videoList"
          >
            <el-button size="small" type="primary">点击上传视频</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传MP4文件，且不超过1M
            </div>
          </el-upload>
        </el-form-item>

        <!-- 文章封面 -->
        <el-form-item label="文章封面" prop="cover">
          <el-upload
            :action="$baseUrl + '/upload'"
            list-type="picture-card"
            :headers="headers"
            :on-success="onSuccess"
            :on-remove="handleRemove"
            :limit="3"
            :on-exceed="onExceed"
            :file-list="postForm.cover"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <!-- 提交 -->
        <el-form-item>
          <el-button type="primary" round @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getCategoryAPI } from "@/api/category";
import VueEditor from "vue-word-editor";
import "quill/dist/quill.snow.css";
import { getToken } from "@/utils/localData";
import {
  getPostDetailByIdAPI,
  publishPostAPI,
  updatePostAPI,
} from "@/api/news";

export default {
  data() {
    return {
      videoList: [], // 用于展示的视频列表
      headers: { Authorization: getToken() },
      id: this.$route.params.id,
      postForm: {
        title: "", // 文章的标题
        type: 1, // 文章的类型，默认为文章
        content: "", // 文章内容，如果是视频，它是就视频的路径
        categories: [], // 栏目的id的集合(数组)
        cover: [], // 封面数据
        content: "", //文章内容
      },
      rules: {
        title: [{ required: true, message: "请输入标题名称", trigger: "blur" }],
        categories: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个栏目",
            trigger: "change",
          },
        ],
        cover: [
          {
            type: "array",
            required: true,
            message: "请至少选择一张封面",
            trigger: "change",
          },
        ],
      },
      cateList: [], //栏目列表
      checkAll: false,
      isIndeterminate: false,
      // 富文本
      config: {
        // 上传图片的配置

        uploadImage: {
          url: this.$baseUrl + "/upload",
          name: "file",
          // 🔔 由于这里并不是 axios 发送的请求，所以需要独立配置一下请求头
          headers: { Authorization: getToken() },
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          //要用到this, 要用箭头函数
          uploadSuccess: (res, insert) => {
            console.log(res);
            if (res.data.message === "文件上传成功") {
              // 把图片插入页面中
              insert(this.$baseUrl + res.data.data.url);
            } else {
              this.$message.warning("文件上传有误");
            }
          },
        },
      },
    };
  },
  components: {
    VueEditor,
  },
  async created() {
    //发布文章
    // 获取栏目数据
    const res = await getCategoryAPI();
    //console.log(res);
    // 去前面的两个 //从第三个开始
    this.cateList = res.data.data.slice(2);
    // console.log(this.id);
    //如果没有id说明只是发布文章
    if (!this.id) return;
    //编辑文章走获取对应id的文章
    const res2 = await getPostDetailByIdAPI(this.id);
    // console.log(res2);
    if (res2.data.message === "文章不存在") {
      return this.$message.error("文章不存在");
    }
    //文章存在
    const artObj = res2.data.data;
    console.log(artObj);
    // 标题
    this.postForm.title = artObj.title;
    //类型
    this.postForm.type = artObj.type;
    //栏目
    this.postForm.categories = artObj.categories.map((item) => item.id);
    //内容
    this.postForm.content = artObj.content;
    // console.log(this.postForm.content);
    if (this.postForm.type === 1) {
      //富文本
      var quill = this.$refs.vueEditor.editor;
      quill.clipboard.dangerouslyPasteHTML(0, this.postForm.content);
    } else {
      // 4.2 视频要按 Upload 上传插件 :file-list="[ name:'', url: '' ]"
      this.videoList = [{ name: "mp4视频", url: artObj.content }];
      // console.log(this.videoList);
    }
    // 5. 封面
    this.postForm.cover = artObj.cover.map((item) => {
      // 通过 map 处理成插件要求格式 [{ name:'', url: '' },{ name:'', url: '' }]
      return {
        id: item.id,
        name: item.id,
        url: this.$baseUrl + item.url,
      };
    });
  },
  methods: {
    //视频上传前的钩子函数
    videoBeforeUpload(file) {
      console.log(file);

      const isMp4 = file.type === "video/mp4";
      const isLt2M = file.size / 1024 / 1024 < 1;

      if (!isMp4 || !isLt2M) {
        this.$message.error(
          "上传视频只能是 mp4 格式!和上传视频大小不能超过 1MB!"
        );
        // 返回 false , 可中止上传
        return false;
      }
    },
    //视频上传
    onVideoSuccess(res) {
      console.log(res);
      if (res.message !== "文件上传成功") {
        this.$message.warning("上传出问题了");
        return;
      }
      // 视频上传成功
      // 直接拼接好视频地址作为内容即可
      this.postForm.content = this.$baseUrl + res.data.url;
    },
    //视频移除
    videoRemove(file) {
      console.log(file);
      this.postForm.content = "";
    },
    // 点击全选按钮
    handleCheckAllChange(val) {
      // console.log(val);//true|false
      // 如果值为 true ， map 处理后端返回的栏目数组得到id ,返回给 this.postForm.categories,
      //否则返回空数组
      this.postForm.categories =
        val === true ? this.cateList.map((item) => (item = item.id)) : [];
      //取消全选
      this.isIndeterminate = false;
    },

    //移除封面
    // file: 当前被移除的
    handleRemove(file) {
      console.log(file);

      // 🔔 获取到删除项的 id，没有 file.response 就获取 file.id
      const id = file.response ? file.fileponse.data.id : file.id;
      // 图片删除了， id 也要被删除
      this.postForm.cover = this.postForm.cover.filter((item) => item.id != id);
    },
    //封面上传
    onSuccess(res) {
      // console.log(res);
      // 封面数组也要按接口文档要求来
      this.postForm.cover.push({
        id: res.data.id,
        // name 和 url 用于 Upload 插件 file-list 属性渲染展示使用的
        name: res.data.id,
        // 拼接成完整路径才能看到图片
        url: this.$baseUrl + res.data.url,
      });
    },
    //封面超出限制触发的钩子
    onExceed() {
      this.$message.warning("封面不能超出3张哦");
    },
    //提交按钮
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid === false) {
          //数据不合法
          this.$message.warning("请检查数据是否合法");
          return false;
        }
        //数据合法
        // 用户选择是的文章，而不是视频
        if (this.postForm.type === 1) {
          const quill = this.$refs.vueEditor.editor;
          // console.log(quill.getLength());
          //如果文章有内容
          if (quill.getLength() <= 1) {
            this.$message.warning("请输入文章内容");
            return;
          } //有内容
          // 按照后端字段要求，保存到 content 字段中，为发布文章做准备
          this.postForm.content = quill.root.innerHTML;
          // console.log(this.postForm.content);
        } else if (this.postForm.type === 2 && this.postForm.content === "") {
          //用户选的是视频
          this.$message.warning("请选择上传的视频");
          return;
        }
        // 处理栏目数据，后台接口需要是对象数组，而我们获取到的是值数组
        const data = {
          //数据是双向绑定的
          ...this.postForm,
          // 由于 cover 用于做封面预览的时候会有一些多余的数据，后端其实只需要图片的 id 即可
          cover: this.postForm.cover.map((item) => {
            return { id: item.id };
          }),
          // 后端栏目数据要求 [{id:1}, {id:2}] 格式
          categories: this.postForm.categories.map((item) => {
            return { id: item };
          }),
        };
        // console.log("this.postForm", this.postForm);
        console.log("data", data);
        // 情况1：如果有id，就调用编辑接口
        if (this.id) {
          const res = await updatePostAPI(this.id, data);
          console.log(res);
          if (res.data.message === "文章编辑成功") {
            this.$message.success("文章编辑成功");
            // 发布成功后跳转到文章列表页
            this.$router.push("/home/post_list");
          }
        } else {
          // 情况2：如果没有id，就调用发布接口
          // 所有数据准备完毕，调用发布文章接口即可
          //发布文章
          const res = await publishPostAPI(data);
          console.log(res);
          if (res.data.message === "文章发布成功") {
            const tips =
              this.postForm.type === 1 ? "文章发布成功" : "视频发布成功";
            this.$message.success(tips);
            this.$router.push({ path: "/home/post_list" });
            return;
          }
        }
      });
    },
    // 文章发布
  },
  watch: {
    //监听postForm.categories里的数据变化
    // 点击小选按钮的时候触发
    "postForm.categories"(value) {
      // console.log("小选数组", value);
      let checkedCount = value.length;
      // 全选状态：选中栏目的长度 和 原数组长度是否一致，说明全选
      this.checkAll = checkedCount === this.cateList.length;
      //不确定状态：只选中了其中某一些  0 < ? < 总长度
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cateList.length;
    },
  },
};
</script>

<style>
</style>